<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>035-feOffset、feFlood、feComposite、feMerge以及feMergeNode</title>
</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="test" filterUnits="objectBoundingBox" x="0" y="0" width="1.5" height="4">
                <feOffset result="Off1" dx="15" dy="20" />
                <feFlood style="flood-color:#ff0000;flood-opacity:0.8" />
                <feComposite in2="Off1" operator="in" result="C1" />
                <feOffset in="SourceGraphic" result="Off2" dx="30" dy="40" />
                <feFlood style="flood-color:#ff0000;flood-opacity:0.4" />
                <feComposite in2="Off2" operator="in" result="C2" />
                <feMerge>
                    <feMergeNode in="C2" />
                    <feMergeNode in="C1" />
                    <feMergeNode in="SourceGraphic" />
                </feMerge>
            </filter>
        </defs>
        <text x="30" y="100" style="font:36px verdana bold;fill:blue;filter:url(#test)">This is some text!</text>
    </svg>
</body>

</html>